<template>
    <div>
        <CollegeHeader></CollegeHeader>
        <div id="content">
            <el-divider content-position="left"><i class="el-icon-school"></i> 大学查询</el-divider>
            <div class="college">
                <div class="collegeCondition">
                    <el-divider><i class="el-icon-search"></i> 筛选学校</el-divider>
                    <!-- 查询表单   -->
                    <div class="collegeConditionFrom">
                        <el-form :model="collegeConditionFrom">
                            <el-form-item prop="collegeName" >
                                <span>大学名字 > </span>
                                <el-input v-model="collegeConditionFrom.collegeName"  placeholder="请输入查询大学所包含的字符(选填）" style="width: 300px"></el-input>
                                <el-button class="searchBtn" @click="searchCollege(1)" >查 询 学 校</el-button>
                            </el-form-item>
                            <el-form-item prop="province">
                                <span>所在省份 ></span>
                                <span>
                                <el-select v-model="collegeConditionFrom.province" placeholder="省份" >
                                    <el-option v-for="province in provinces" :value=province>{{province}}</el-option>
                                </el-select>
                                </span>
                            </el-form-item>
                            <el-form-item prop="startType" >
                                <span>办学类型 ></span>
                                <span>
                                    <el-radio-group v-model="collegeConditionFrom.startType">
                                        <el-radio label="全部"></el-radio>
                                        <el-radio label="普通本科"></el-radio>
                                        <el-radio label="专科（高职)"></el-radio>
                                        <el-radio label="独立学院"></el-radio>
                                        <el-radio label="中外合作办学"></el-radio>
                                    </el-radio-group>
                                </span>
                            </el-form-item>
                            <el-form-item prop="collegeType" >
                                <span>学校类型 ></span>
                                <span>
                                    <el-radio-group v-model="collegeConditionFrom.collegeType">
                                        <el-radio label="全部"></el-radio>
                                        <el-radio label="综合"></el-radio>
                                        <el-radio label="理工"></el-radio>
                                        <el-radio label="农林"></el-radio>
                                        <el-radio label="医药"></el-radio>
                                        <el-radio label="师范"></el-radio>
                                        <el-radio label="语言"></el-radio>
                                        <el-radio label="财经"></el-radio>
                                        <el-radio label="政法"></el-radio>
                                        <el-radio label="体育"></el-radio>
                                        <el-radio label="民族"></el-radio>
                                        <el-radio label="军事"></el-radio>
                                    </el-radio-group>
                                </span>
                            </el-form-item>
                            <el-form-item prop="collegeTag" >
                                <span>学校标签 ></span>
                                <span>
                                    <el-radio-group v-model="collegeConditionFrom.collegeTag">
                                        <el-radio label="全部"></el-radio>
                                        <el-radio label="211工程"></el-radio>
                                        <el-radio label="985工程"></el-radio>
                                        <el-radio label="一流大学建设高校"></el-radio>
                                        <el-radio label="一流学科建设高校"></el-radio>
                                        <el-radio label="教育部直属"></el-radio>
                                        <el-radio label="中央部委"></el-radio>
                                    </el-radio-group>
                                </span>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div class="collegeResultList" v-show="collegeResultList.length != 0">
                        <el-divider content-position="center" ><i class="el-icon-finished"></i> 查询结果列表</el-divider>
                        <div style="margin:50px">
                            <span >共查询了{{total}}所学校,当前第{{currentPage}}页</span><br/>
                            <p style="color: #5dabf7">(点击学校列表可查看具体学校信息)</p>
                        </div>
                        <div class="collegeList" >
                            <el-table :data="collegeResultList" stripe style="width: 100%" @row-click ="tabelRowClick">
                                <el-table-column type="index" label="序号" width="50"></el-table-column>
                                <el-table-column label="logo" width="100">
                                    <template  scope="scope">
                                        <img :src="collegeResultList[scope.$index].avatar" style="width: 50px;height: 50px">
                                    </template>
                                </el-table-column>
                                <el-table-column prop="collegeName" label="大学" width="150"></el-table-column>
                                <el-table-column prop="attach" label="隶属" width="100"></el-table-column>
                                <el-table-column prop="province" label="所在省份" width="100"></el-table-column>
                                <el-table-column prop="region" label="所在地区" width="110"></el-table-column>
                                <el-table-column prop="startType" label="办学类型" width="120"></el-table-column>
                                <el-table-column prop="collegeType" label="学校类型" width="100"></el-table-column>
                                <el-table-column prop="collegeTag" label="学校标签" width="300"></el-table-column>

                                <el-table-column prop="popularityValue" label="人气值" ></el-table-column>
                            </el-table>
                            <!--分页-->
                            <el-pagination layout="prev, pager, next"
                                           style="margin: 10px auto;text-align: center"
                                           :current-page="currentPage"
                                           :page-size="pageSize"
                                           :total="total"
                                           @current-change="searchCollege">
                            </el-pagination>
                        </div>
                    </div>

                </div>
            </div>
            <el-divider content-position="center" >&copy; 2020 </el-divider>
        </div>
    </div>
</template>

<script>
    import CollegeHeader from "../components/CollegeHeader";
    import college from "../api/college";
    export default {
        name: "College",
        components: {CollegeHeader},
        data(){
            return{
                collegeConditionFrom:{collegeName:null,province:null,startType:null,collegeType:null,collegeTag:null},
                provinces:["全部","北京","天津","河北","河南","山东","山西","陕西","内蒙古","辽宁","吉林","黑龙江","上海","江苏","安徽","江西","湖北","湖南",
                    "重庆","四川","贵州","云南", "广东","广西","福建","甘肃","宁夏","新疆","西藏","海南","浙江","青海"],
                collegeResultList:[],
                collegeCondition:null,
                //分页数据
                currentPage: 1,
                total: 0,
                pageSize: 10
            }
        },
        methods:{
            //查询学校
            searchCollege(currentPage){
                //验证
                if(this.collegeConditionFrom.province ===null ||this.collegeConditionFrom.startType === null ||
                    this.collegeConditionFrom.collegeType === null || this.collegeConditionFrom.collegeTag === null){
                    //验证表单数据
                    this.$notify.warning({title: '必填信息输入不完整', message: '请输入完整的信息，再点击查询按钮', duration: 2500});
                }else{
                    //请求
                    console.log(this.collegeConditionFrom)
                    let vm = this
                    college.getCollegeByPage(this.collegeConditionFrom,currentPage).then(function (response) {
                        // console.log(response)
                        if (response.data.code === 200){
                            console.log(response.data.data)
                            var data = response.data.data
                            vm.collegeResultList = data.records
                            vm.currentPage = data.current
                            vm.total = data.total
                            vm.pageSize = data.size

                            vm.$notify.success({title: '学校已成功查询', message: '请查看查询结果列表', duration: 2500});

                            vm.collegeCondition = vm.collegeConditionFrom
                        }else{
                            if (response.data.code === 201){
                                vm.collegeResultList = []
                                vm.$notify.info({title: '查询结果为空！', message: '请重筛选学校', duration: 2500});
                            }

                        }
                    })
                }


            },
            tabelRowClick(row, event, column){
                let no = true
                for (let i = 0 ; i < this.collegeResultList.length ; i++) {
                    if(this.collegeResultList[i].collegeName === row.collegeName){
                        this.$store.commit("SET_COLLEGE",this.collegeResultList[i])
                        console.log(this.$store.getters.GET_COLLEGE)
                        window.open(this.$router.resolve("/collegeDetails").href, '_blank');
                        no = false
                    }
                }
                if (no){
                    this.$notify.warning({title: '该学校信息暂不完整', message: '请选择其他学校查看', duration: 6000});
                }
            }
        }
    }
</script>

<style scoped>
    .college{
        border: rgb(241, 252, 252) solid 2px;
        margin: 50px 100px;
        /*height: 500px;*/
    }
    .collegeCondition{
        margin: 100px;
    }
    .collegeConditionFrom{
        margin: 80px 50px;
    }
    .el-divider__text{
        color: #5dabf7;
    }
    span,p{
        font-family: 仿宋;
        font-size: 18px;
        color: #292b2b;
        margin: 10px;
    }
    .el-button{
        font-family: 华文楷体;
        font-size: 22px;
        color: #555b5c;
        margin: -8px 200px;
        float: right;
        border: #5dabf7 solid 1px;
    }
    .el-button:hover{
        font-size: 24px;
        color: #5dabf7;
    }
</style>